<template>
  <div class="consume pad">
    <div class="head">
      <span>用户消费统计</span>
    </div>
    <div class="search m-t-b">
      <el-input placeholder="昵称" @input="clearSearch" clearable v-model="searchTxt" />
      <el-button @click="handleSearch" type="primary">
        <i class="el-icon-search"></i> 搜索
      </el-button>
    </div>
    <el-table class="m-t-b" stripe border :data="orders" v-loading="loading">
      <!-- <el-table-column label="注册用户编号" prop="openid"></el-table-column> -->
      <el-table-column label="注册用户编号" prop="id"></el-table-column>
      <el-table-column label="昵称" prop="nickname"></el-table-column>
      <el-table-column label="消费金额">
        <template slot-scope="scope">
          {{scope.row.tradeMoney || '--' + '元'}}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="m-t-b flex"
      :page-size="pageSize"
      layout="prev, pager, next"
      @current-change="handlePagi"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
import { userConsumeAnalyze } from '../api'

export default {
  name: 'consume',
  data () {
    return {
      searchTxt: '',
      loading: true,
      pageSize: 10,
      total: 0,
      orders: []
    }
  },
  methods: {
    handleSearch () {
      if (!this.$checkAuth('canSearchConsume')) {
        return this.$message.error('暂无对应操作权限!')
      };
      if (!this.searchTxt.trim()) {
        this.searchTxt = ''
        return this.$message.error('请输入搜索内容!')
      }
      this.fetchConsumeList(1, this.searchTxt)
    },
    clearSearch () {
      if (!this.searchTxt) {
        this.fetchConsumeList(1)
      }
    },
    handlePagi (page) {
      if (this.searchTxt.trim()) {
        this.fetchConsumeList(page, this.searchTxt)
      } else {
        this.fetchConsumeList(page)
      }
    },
    fetchConsumeList (index, name) { // 查询用户消费列表
      this.loading = true
      name = name || null
      userConsumeAnalyze({
        index: index,
        count: this.pageSize,
        queryParam: {
          nickname: name
        }
      })
      .then(res => {
        if (res.data.code === 1) {
          this.orders = res.data.data.list || [];
          this.total = res.data.data.totalRecord
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
        this.loading = false
      })
      .catch(e => {
        this.loading = false
        this.$message.error('网络异常!')
      })
    }
  },
  created () {
    this.fetchConsumeList(1)
  }
}
</script>
<style lang="scss">
  .consume {
    .search {
      display: flex;
    }
    table {
      .cell {
        text-align: center;
      }
    }
  }
</style>
